<script>
import * as LoginFunction from "@/assets/js/LoginFunction"
import {DataCloneError} from "core-js/internals/dom-exception-constants";
import {cancelLogin} from "@/assets/js/LoginFunction";
export default {
  name: "LoginDiv",
  data() {
    return {
      isLoggedIn: false,  // 添加响应式属性
      userName1:"default",
      userId1:-1,
      administratorId1:-1,
      administratorCategory1:-1
    };
  },
  methods: {
    cancelLogin,
    a(){
      LoginFunction.checkLogin(this);
    }
  },
  mounted() {

      this.a()// 在组件挂载时检查登录状态

  },

};
</script>

<template>
  <div>
    <div class="button-container" v-if="!isLoggedIn">
      <router-link to="/login">
        <el-button type="primary">登录</el-button>
      </router-link>
      <router-link to="/register">
        <el-button type="success">注册</el-button>
      </router-link>
    </div>
    <div v-if="isLoggedIn" class="logged-in-container">
      <div class="logged-in-items">
        <router-link to="/personalCenter/basicUserInfo">
          <img
              src="../../assets/default.png"
              style="margin-right: 10px; width: 35px; height: 35px; border-radius: 50%"
          />
        </router-link>
          <h4>{{ userName1 }}</h4>


        <router-link to="/admin">
          <el-button type="primary" v-if="administratorCategory1>0" >后台管理</el-button>
        </router-link>

        <el-button type="danger" @click="cancelLogin">退出登录</el-button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.logged-in-items {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: flex-start; /* 水平排列 */
}

.logged-in-items img {
  margin-right: 10px;
  width: 35px;
  height: 35px;
  border-radius: 50%; /* 圆形图片 */
}

.logged-in-items h4 {
  margin: 0;
  margin-right: 10px; /* 文字与按钮之间的间距 */
}

.el-button {
  margin-right: 10px; /* 按钮之间的间距 */
}
</style>